<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css\css.css">
    <style>
        /* 背景图片：background-image:url(images/1,jpg); */
        /* 如果样式表是外链的，那么要书写从css出发到图片的路径，而不是从htML出发的路径。 */
        /* 如果图片比盒子小，默认情况下，图片会横向纵向平铺。 */
        /* 如果图片比盒子大小，默认情况下，图片被以左上角为基准被裁剪。 */
        div{
            margin:20px;
        }
        div.box1{
            width: 800px;
            height: 800px;
            background-image: url(3.png);
        }
        div.box2{
            width: 800px;
            height: 80px;
            background-image: url(3.png);
        }
    </style>
</head>
<body>
    <div class="box1">如果图片比盒子小，默认情况下，图片会横向纵向平铺。</div>
    <div class="box2">如果图片比盒子大小，默认情况下，图片被以左上角不动被裁剪。</div>
    <div class="box3">如果样式表是外链的，那么要书写从css出发到图片的路径，而不是从htML出发的路径。</div>
</body>
</html>